<template>
  <div>
    <div class="breadcrumb-container flex-row">
      <breadcrumb />
    </div>
    <el-divider />
    <div class="filter-container flex-row">
      <el-input
        v-model="listQuery.address"
        placeholder="请输入搜索内容"
        prefix-icon="el-icon-search"
        style="width: 200px"
        class="filter-item"
      />
      <el-button class="filter-item" type="primary" @click="getList"
        >搜索</el-button
      >
    </div>
    <div class="overview-content">
      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom: 20px">
          <div class="chart-wrapper">
            <el-table
              show-overflow-tooltip
              :height="tableHeight"
              :data="list"
              style="width: 100%"
              class="card-table"
              :border="false"
              stripe
              :default-sort="{ prop: 'five' }"
            >
              <el-table-column
                show-overflow-tooltip
                label="序号"
                type="index"
                width="50"
                align="center"
              />
              <!-- <el-table-column
                show-overflow-tooltip
                prop="billDate"
                :formatter="dateFormatmonth"
                label="账单月份"
                min-width="100"
                align="center"
              /> -->
              <el-table-column
                show-overflow-tooltip
                label="地址 "
                prop="address"
                min-width="180"
                align="center"
              >
                <template slot-scope="scope">
                  <router-link
                    :to="{
                      path: '/house/pageDetail',
                      query: { id: scope.row.id },
                    }"
                    class="linkBtn"
                  >
                    {{ scope.row.address }}
                  </router-link>
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="type"
                :formatter="houseTypeFormat"
                label="类型"
                min-width="80"
                align="center"
              />
              <el-table-column
                show-overflow-tooltip
                label="户型"
                min-width="100"
                align="center"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.roomNumber"
                    >{{ scope.row.roomNumber }}房</span
                  >
                  <span v-if="scope.row.wcNumber"
                    >{{ scope.row.wcNumber }}卫</span
                  >
                  <span v-if="scope.row.carRoomNumber"
                    >{{ scope.row.carRoomNumber }}车库</span
                  >
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="ownerName"
                label="业主"
                min-width="80"
                align="center"
              />
              <el-table-column
                show-overflow-tooltip
                prop="bdName"
                label="BD"
                align="center"
              />
              <el-table-column
                show-overflow-tooltip
                prop="operatorName"
                label="运营"
                align="center"
                min-width="80"
              />
              <el-table-column
                show-overflow-tooltip
                prop="createdTime"
                label="添加时间"
                :formatter="dateFormatRow"
                sortable
                width="100"
                align="center"
              />
              <el-table-column
                show-overflow-tooltip
                prop="tag"
                label="标签"
                width="120"
                :formatter="houseTagFormat"
                align="center"
              />
              <!-- v-if="pageType === 2" -->
              <el-table-column
                show-overflow-tooltip
                prop="lastBillDate"
                label="最近一次账单"
                width="120"
                align="center"
              >
                <template slot-scope="scope">
                  {{
                    !scope.row.lastBillDate
                      ? scope.row.leaseBeginDate
                      : getLastDate(scope.row.lastBillDate)
                  }}
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="操作"
                align="center"
                width="150"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    class="linkBtn"
                    @click="handleClick(scope.row)"
                    >上传</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              :current-page="listQuery.page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
            <!--          <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />-->

            <!---->
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import myModal from "@/components/Modal";
import { expiredBillDet, waitUploadBillDet } from "@/api/dashboard";
import {
  houseTypeFormat,
  houseStatusFormat,
  dateFormatRow,
  dateFormatmonth,
  houseTagFormat,
} from "@/utils/common";
import Breadcrumb from "@/components/Breadcrumb";

export default {
  components: { myModal, Breadcrumb },
  data() {
    return {
      currentPage: 1,
      list: [],
      total: 0,
      listLoading: true,
      tableHeight: 0,
      listQuery: {
        address: "",
        page: 1,
        limit: 10,
        type: null,
        orderStatus: null,
        payType: null,
        buyer: null,
        goodsId: null,
        organizationId: null,
      },
      radio: 1,
      houseTypeFormat,
      houseStatusFormat,
      houseTagFormat,
      dateFormatRow,
      dateFormatmonth,
      houseId: "",
    };
  },
  computed: {
    pageType() {
      if (this.$route.path.includes("accountOrderWait")) {
        /// 待上传
        return 1;
      } else if (this.$route.path.includes("accountOrderExp")) {
        /// 已过期
        return 2;
      }
      return 0;
    },
  },
  created() {
    this.getList();
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 260;
    });
  },
  methods: {
    getLastDate(date) {
      const dateList = date.split("-").map((item) => Number(item));
      if (dateList[1] >= 12) {
        return `${dateList[0] + 1}-01`;
      } else {
        return `${dateList[0]}-${dateList[1] < 10 ? "0" : ""}${
          dateList[1] + 1
        }`;
      }
    },
    getList() {
      const api = this.pageType === 1 ? waitUploadBillDet : expiredBillDet;
      api(this.listQuery).then((response) => {
        this.list = response.data.records;
        this.total = response.data.total;
        console.log("111", this.list);
      });
    },
    async handleClick(row) {
      const { billData, leaseBeginDate } = row;
      let query = { houseId: row.id };
      query.billDate = billData || leaseBeginDate;
      this.$router.push({ path: "/billing/index", query });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.listQuery.page = 1;
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.listQuery.page = val;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.breadcrumb-container {
  position: relative;
  width: 100%;
  height: 60px;
  padding: 0 14px;

  &::after {
    content: "";
    position: absolute;
    left: 0px;
    top: 50%;
    width: 2px;
    height: 37px;
    background-color: #5ac6b7;
    transform: translateY(-50%);
  }
}
.overview-content {
  padding: 10px;
}
.filter-container {
  padding: 20px 10px 0 10px;
}
::v-deep .el-table th.is-leaf,
::v-deep .el-table td,
::v-deep .el-table__body {
  border: 0;
}
::v-deep .el-table::before,
::v-deep .el-table__fixed-right::before {
  display: none;
}
::v-deep th {
  background: #f7f7f7;
  font-weight: normal;
  color: #101010;
}
</style>
